<template>
  <div>
    <pre><code ref="codeBlock" class="language-sql">{{ code }}</code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'  // 引入样式

export default {
  name: 'Highlight',
  props: {
    code: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      code: `function hello() {
  console.log('Hello, world!');
}`
    }
  },
  mounted() {
    this.highlightCode()
  },
  updated() {
    this.highlightCode()
  },
  methods: {
    highlightCode() {
      const codeBlock = this.$refs.codeBlock
      hljs.highlightBlock(codeBlock)
    }
  }
}
</script>

<style scoped>
/* 添加一些样式以更好地展示代码块 */
pre {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
}
</style>